<template>
  <div class="dict">
    <!-- 树状列表 -->
    <div style="width: 342px; margin-right: 10px" class="bg">
      <left-tree
        :data="data"
        :title="title"
        :key-id="'id'"
        :field-list="fieldList"
        :search-data="searchData"
        :loading="loading"
        :type="1"
        ref="leftTree"
        @filterHandle="filterHandle"
        @importHandle="importHandle"
        @handleItem="handleItem"
        @reloadHandle="reloadHandle"
        @nodeDropHandle="nodeDropHandle"
        @nodeClick="nodeClick"
        @ok="getList"
      />
    </div>

    <!-- 表格区域 -->
    <div class="bg rightTable">
      <h3 class="code-title">
        {{ rightTitle }}
      </h3>
      <el-form inline class="search-item">
        <el-form-item
          label="字段名称："
          placeholder="输入字段名称关键字"
        >
          <el-input v-model="queryParams.aliasName" />
        </el-form-item>

        <el-form-item label="字段类型：">
          <el-select
            v-model="queryParams.typeName"
            @change="selectTypeChange"
          >
            <el-option
              v-for="item of typeList"
              :key="item"
              :value="item"
            >{{ item }}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="字段类型(数据库)：">
          <el-select v-model="queryParams.type">
            <el-option
              v-for="item of typeList2"
              :key="item.code"
              :value="item.code"
            >{{ item.code }}</el-option>
          </el-select>
        </el-form-item>

        <div style="margin-bottom: 20px">
          <el-button
            type="primary"
            icon="el-icon-remove-outline"
            size="mini"
            class="h32"
            @click="handleMove"
          >移动</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            class="h32"
            @click="handleQuery"
          >查询</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            size="mini"
            class="h32"
            @click="handleReset"
          >刷新</el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            class="h32"
            @click="handleAddItem"
          >新建</el-button>
          <el-popconfirm
            v-if="selectIds.length > 0"
            title="确认删除所有选中项吗？"
            @confirm="handleDelete"
          >
            <el-button
              slot="reference"
              type="primary"
              icon="el-icon-delete-solid"
              style="margin-left: 10px"
              size="mini"
              class="h32"
            >删除</el-button>
          </el-popconfirm>
          <el-button
            v-else
            type="primary"
            icon="el-icon-delete-solid"
            size="mini"
            class="h32"
            @click="handleDelete"
          >删除</el-button>
        </div>
      </el-form>

      <el-table
        :data="tableData"
        :max-height="mapHeight"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="字段名称" prop="aliasName">
          <template slot-scope="scope">
            <a
              href="javaScript:;"
              style="color: #409eff"
              @click="handleItem(scope.row)"
            >{{ scope.row.aliasName }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="字段名称(数据库)"
          prop="name"
        />
        <el-table-column
          label="字段类型"
          prop="typeName"
        />
        <el-table-column
          label="更新时间"
          prop="updateTime"
        />
        <el-table-column
          label="创建人"
          prop="createName"
        />
      </el-table>
      <!---新增、编辑，详情-->
      <el-dialog
        :title="addAndEditdialogTit"
        :visible.sync="dialogVisible"
        :destroy-on-close="true"
        width="60%"
        :before-close="handleClose"
      >
        <div>
          <h3 class="code-title">
            {{ rightTitle }}
          </h3>
          <el-form
            ref="form"
            v-loading="loading"
            :model="form"
            :rules="rules"
            label-width="auto"
          >
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="字段名称："
                  prop="aliasName"
                >
                  <span v-if="!isEdit">{{
                    form.aliasName
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.aliasName"
                    placeholder="输入字段名称关键字"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item
                  label="字段名称(数据库)："
                  prop="name"
                >
                  <span v-if="!isEdit">{{ form.name }}</span>
                  <el-input
                    v-else
                    v-model="form.name"
                    placeholder="输入字段名称关键字"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  label="字段类型："
                  prop="typeName"
                >
                  <span v-if="!isEdit">{{
                    form.typeName
                  }}</span>
                  <el-select
                    v-else
                    v-model="form.typeName"
                    style="width: 100%"
                    @change="typeChange"
                  >
                    <el-option
                      v-for="item of typeList"
                      :key="item"
                      :value="item"
                    >{{ item }}</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item
                  label="字段类型(数据库)："
                  prop="type"
                >
                  <span v-if="!isEdit">{{ form.type }}</span>
                  <el-select
                    v-else
                    v-model="form.type"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item of typeList3"
                      :key="item.code"
                      :value="item.code"
                    >{{ item.code }}</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item
                  label="字段释义："
                  class="content-item"
                >
                  <span v-if="!isEdit">{{
                    form.definition
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.definition"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item
                  label="字段示例："
                  class="content-item"
                >
                  <span v-if="!isEdit">{{
                    form.instance
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.instance"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item
                  label="字段规则："
                  class="content-item"
                >
                  <span v-if="!isEdit">{{ form.rule }}</span>
                  <el-input
                    v-else
                    v-model="form.rule"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item
                  label="字段备注："
                  class="content-item"
                >
                  <span v-if="!isEdit">{{
                    form.remark
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.remark"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="图片：">
                  <!--:on-change="uploadChangeHandle"-->
                  <el-upload
                    ref="upload"
                    action="#"
                    :class="[
                      ((isMaxNum ||!isEdit) || this.fileList.length>=maxNum)? 'hide' : '',
                      'dict-upload'
                    ]"
                    list-type="picture-card"
                    accept="image/*"
                    :limit="maxNum"
                    :on-change="uploadChangeHandle"
                    :auto-upload="false"
                    :file-list="fileList"
                  >
                    <i
                      slot="default"
                      class="el-icon-plus"
                    />
                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      >
                      <span
                        class="el-upload-list__item-actions"
                      >
                        <span
                          class="el-upload-list__item-preview"
                          @click="
                            handlePictureCardPreview(file)"
                        >
                          <i
                            class="el-icon-zoom-in"
                          />
                        </span>
                        <!--<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
													<i class="el-icon-download"></i>
												</span>-->
                        <span
                          v-if="!disabled && isEdit"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <i
                            class="el-icon-delete"
                          />
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd" :span="10">
                <el-form-item label="创建时间：">
                  <span v-if="!isEdit">{{
                    form.createTime
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.createTime"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd" :span="10" :offset="2">
                <el-form-item label="创建人：">
                  <span v-if="!isEdit">{{
                    form.createName
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.createName"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd" :span="10">
                <el-form-item label="更新时间：">
                  <span v-if="!isEdit">{{
                    form.updateTime
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.updateTime"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="!isAdd" :span="10" :offset="2">
                <el-form-item label="更新人：">
                  <span v-if="!isEdit">{{
                    form.updateName
                  }}</span>
                  <el-input
                    v-else
                    v-model="form.updateName"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!---<div class="footer">
							<el-button type="primary" v-if="!isEdit" @click="isEdit=true">编辑</el-button>
							<el-button type="primary" v-if="isEdit" @click="handleComfirm">确定</el-button>
							<el-button v-if="isEdit" @click="handleCancel">取消</el-button>
							<el-popconfirm title="确认删除吗？" @confirm="handleDelete" v-if="!isAdd&&!isEdit">
								<el-button type="danger" slot="reference" style="margin:0 10px;">删除</el-button>
							</el-popconfirm>
							<el-button @click="reback">返回</el-button>
						</div>-->
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <!--<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
          <el-button
            v-if="!isEdit"
            type="primary"
            @click="handleEdit"
          >编辑</el-button>
          <el-button
            v-if="isEdit"
            type="primary"
            @click="handleComfirm"
          >确定</el-button>
          <el-button
            v-if="isEdit && !isAdd"
            @click="handleCancel"
          >取消</el-button>
          <el-popconfirm
            v-if="!isAdd && !isEdit"
            title="确认删除吗？"
            @confirm="handleDelete2"
          >
            <el-button
              slot="reference"
              type="danger"
              style="margin: 0 10px"
            >删除</el-button>
          </el-popconfirm>
          <el-button
            v-if="isAdd || (!isEdit && !isAdd)"
            @click="handleClose"
          >关闭</el-button>
        </span>
      </el-dialog>
      <!--移动-->
      <el-dialog
        title="移动字段"
        :visible.sync="dialogVisibleMove"
        :destroy-on-close="true"
        width="60%"
        :before-close="handleMoveClose"
      >
        <div class="move-content mytree">
          <el-tree
            ref="treeForm"
            :data="data"
            :props="defaultProps"
            node-key="id"
            :check-strictly="true"
            default-expand-all
            show-checkbox
            :check-on-click-node="true"
            class="g-tree"
            @check-change="radioSelectHandle"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialogVisibleMove = false"
          >取 消</el-button>
          <el-button
            type="primary"
            @click="handleMoveConfirm"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!---查看图片--->
      <el-dialog :visible.sync="dialogImageVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableList"
      />
    </div>
  </div>
</template>

<script>
import { standardTreeList } from '@/api/dataManagement/standard/index'
import {
  listDict,
  deleteDict,
  getDictType,
  editDict,
  itemDict,
  setTreebatch,
  moveModify,
  getModify,
  uploadImportExcel,
  uploadImage
} from '@/api/dataManagement/standard/dict'
// import { editDict, getDictType, itemDict, deleteDict } from "@/api/dataManagement/standard/dict";
import leftTree from '../modules/leftTree.vue'
import { getHeight } from '@/utils/zkComm'
export default {
  components: { leftTree },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        callback('字段名称(数据库)不能为空')
      } else if (/^[A-Za-z\_\d]+$/gi.test(value)) {
        callback()
      } else {
        callback('只支持数字、字母、下划线')
      }
    }
    return {
      title: '字典分类目录',
      data: [],
      dialogVisible: false,
      dialogVisibleMove: false,
      mapHeight: undefined,
      queryParams: {
        type: '',
        typeName: '',
        aliasName: '',
        pageNum: 1,
        pageSize: 30
      },
      addAndEditdialogTit: '新增',
      total: 0,
      loading: false,
      tableData: [],
      selectIds: [],
      isEdit: false, // 字段编辑模式
      isAdd: false, // 添加模式
      form: {},
      // // 表单校验
      rules: {
        aliasName: [
          {
            required: true,
            message: '字段名称不能为空',
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, validator: validateName, trigger: 'blur' }
        ],
        typeName: [
          {
            required: true,
            message: '字段类型不能为空',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '字段类型(数据库)不能为空',
            trigger: 'blur'
          }
        ]
      },
      typeList: [],
      allTypeList: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      checkedId: '',
      checkedParentId: '',
      rightTitle: '',
      rightParentTitle: '',
      fieldList: [],
      searchData: [
        {
          label: '按目录',
          value: '0'
        },
        {
          label: '按字段名',
          value: '1'
        }
      ],
      dialogImageUrl: '',
      disabled: false,
      maxNum: 6,
      isMaxNum: false,
      dialogImageVisible: false,
      fileList: [],
      pictureNameDeleteList: [],
      fileListlength:[],
    }
  },
  computed: {
    typeList2() {
      return this.allTypeList.filter(
        item => item.name == this.queryParams.typeName
      )
    },
    typeList3() {
      return this.allTypeList.filter(
        item => item.name == this.form.typeName
      )
    }
  },
  created() {
    this.getList(1)
    this.getDictType()
    if (this.$route.query.id) {
      this.getTableList()
    }
  },
  mounted() {
    this.mapHeight = getHeight(true) - 40
    this.getDictType()
  },
  methods: {
    // 树形查询
    getList(arg) {
      this.loading = true
      standardTreeList({ child_type: 0, type: 1 })
        .then(res => {
          if (res.code == 200) {
            this.data = [
              {
                id: 'root',
                name: '数据字典',
                level: -1,
                type: 1,
                childrens: res.data
              }
            ]
            this.$refs.leftTree.getMaxFloor(res.data)
            if (arg == 1) {
              this.$refs.leftTree.setHeightLight()
            }
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getTableList() {
      if (!this.$route.query.id) {
        this.$message({
          type: 'warning',
          message: '请选中一项'
        })
        return false
      }
      const params = {
        treeId: this.$route.query.id,
        ...this.queryParams
      }
      listDict(params).then(res => {
        this.tableData = res.rows
        this.fileList = []
        this.rightTitle = res.rows[0].dirPath.replace(/\>/g, '/')
        this.total = res.total
      })
    },
    test() {
      console.log('数据：', this.data)
    },
    handelEdit() {},
    // 导入excel
    importHandle(data) {
      // 1：数据字典，2：编码目录，3：行业概念）
      uploadImportExcel(1, data).then(res => {
        this.$message({
          type: 'success',
          message: '导入数据字典成功'
        })
        this.getList(1)
      })
    },
    handleItem(record) {
      this.fileList = []
      this.dialogVisible = true
      this.addAndEditdialogTit = '表单详情'
      if (this.$route.query.id != record.treeId) {
        this.$router.push({ query: { id: record.treeId }})
      }
      // this.$router.push({ path: '/DMS/standard/dict/dictItem', query: { id: this.$route.query.id, itemId: record.id } })
      // this.getDictItem(record.id)
      this.getDictItem(record.id)
    },
    handleAddItem() {
      this.form = {}
      if (!this.$route.query.id) {
        this.$message.warning('请选中一项！')
        return false
      } else {
        this.form = {}
        this.addAndEditdialogTit = '新增表单'
        this.isEdit = true
        this.isAdd = true
        this.dialogVisible = true
        // this.$router.push({ path: '/DMS/standard/dict/addDict', query: { id: this.$route.query.id } })
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.isAdd = false
      this.isEdit = false
      this.getTableList()
      this.fileList = []
    },
    nodeClick(data) {
      if (data.id == 'root' && this.$route.query.id) {
        this.$refs.leftTree.setHeightLight()
      } else if (data.id != 'root' && this.$route.query.id != data.id) {
        this.$router.push({ query: { id: data.id }})
        this.rightParentTitle = data.parentName
          ? data.parentName
          : '数据字典'
        this.rightTitle = data.name
        // this.getParentName(this.data,data.parentId)
        this.getTableList()
      }
    },
    handleQuery() {
      this.getTableList()
    },
    handleReset() {
      this.queryParams = {
        type: '',
        typeName: '',
        aliasName: '',
        pageNum: 1,
        pageSize: 30
      }
      this.getTableList()
    },
    handleSelectionChange(arr) {
      this.selectIds = []
      arr.forEach(item => {
        this.selectIds.push(item.id)
      })
    },
    handleDelete() {
      if (this.selectIds.length == 0) {
        this.$message.warning('请选中一项！')
        return false
      }
      if (this.loading) return false
      this.loading = true
      let str = ''
      this.selectIds.forEach((item, index) => {
        if (index != 0) {
          str += ','
        }
        str += item
      })
      deleteDict(str)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getTableList()
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取字段类型表
    getDictType() {
      getDictType().then(res => {
        const arr = []
        this.allTypeList = res.data
        res.data.forEach(item => {
          if (arr.indexOf(item.name) == -1) {
            arr.push(item.name)
          }
        })
        this.typeList = arr
      })
    },
    selectTypeChange() {
      this.queryParams.type = ''
    },
    // 弹框
    getDictItem(id) {
      // if (!id) {
      // 	this.$message({
      // 		type: 'error',
      // 		message: '参数错误'
      // 	})
      // 	return false
      // }
      this.fileListlength=[]
      this.loading = true
      itemDict(id)
        .then(res => {
          this.form = res.data
          if (res.data.pictureUrl) {
            for (var i = 0; i < res.data.pictureUrl.length; i++) {
              this.fileList.push({ url: res.data.pictureUrl[i] })
              this.fileListlength.push({ url: res.data.pictureUrl[i] })
            }
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    typeChange(value) {
      this.$set(this.form, 'type', '');
    },
    handleComfirm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.isAdd) {
            this.handleAdd()
          } else {
            this.handleSave()
          }
        }
      })
    },
    handleAdd() {
      const params = this.form
      if (this.fieldList) {
        // params. = this.fieldList
      }
      params.status = 1
      params.treeId = Number(this.$route.query.id)
      if (this.loading) {
        return false
      }
      this.loading = true

      var fileFormData = new FormData()
      for (var i = 0; i < this.fileList.length; i++) {
        console.log(this.fieldList)
        if (this.fileList[i].raw) {
          fileFormData.append(
            'pictureFile',
            this.fileList[i].raw,
            this.fileList[i].name
          )
        }
      }
      for (var item in this.form) {
        fileFormData.append(item, this.form[item])
      }
      // fileFormData.append('pictureFile ',file.raw,file.name);
      // uploadImage(fileFormData).then(res=>{})
      uploadImage(fileFormData)
        .then(res => {
          if (res.code == 200) {
            this.fileList = []
            this.$message({ message: res.msg, type: 'success' })
            // this.getDictItem(this.form.id)
            this.handleClose()
          } else {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
        .catch(err => {
          this.loading = false
        })
      // editDict(params).then(res => {
      // 	if (res.code == 200) {
      // 		this.$message({ message: res.msg, type: 'success' })
      // 		// this.$router.push({ path: '/DMS/standard/dict', query: { id: this.$route.query.id } })
      // 		this.fileList = [];
      // 		this.handleClose()
      // 		this.getTableList()

      // 	} else {
      // 		this.$message.warning(res.message)
      // 	}
      // 	this.loading = false
      // }).catch(err => {
      // 	this.loading = false
      // })
    },
    handleSave() {
      if (this.loading) {
        return false
      }
      this.loading = true
      var fileFormData = new FormData()
      for (var i = 0; i < this.fileList.length; i++) {
        console.log(this.fieldList)
        if (this.fileList[i].raw) {
          fileFormData.append(
            'pictureFile',
            this.fileList[i].raw,
            this.fileList[i].name
          )
        }
      }
      delete this.form.pictureUrl
      for (var item in this.form) {
        fileFormData.append(item, this.form[item])
      }
      if (this.pictureNameDeleteList.length) {
        for (var k = 0; k < this.pictureNameDeleteList.length; k++) {
          fileFormData.append(
            'pictureNameDeleteList[' + k+']',
            this.pictureNameDeleteList[k]
          )
        }
      }
      uploadImage(fileFormData)
        .then(res => {
          if (res.code == 200) {
            this.fileList = []
            this.$message({ message: res.msg, type: 'success' })
            // this.getDictItem(this.form.id)
            this.handleClose()
          } else {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
        .catch(err => {
          this.loading = false
        })
      // editDict(fileFormData).then(res => {
      // 	if (res.code == 200) {
      // 		this.$message({ message: res.msg, type: 'success' })
      // 		this.getDictItem(this.form.id)
      // 		this.handleClose()
      // 	} else {
      // 		this.$message.warning(res.message)
      // 	}
      // 	this.loading = false
      // }).catch(err => {
      // 	this.loading = false
      // })
    },
    handleDelete2() {
      // if (!this.$route.query.itemId) {
      // 	this.$message({
      // 		message: '参数错误',
      // 		type: 'error'
      // 	})
      // 	return false
      // }
      if (this.loading) return false
      this.loading = true
      deleteDict(this.form.id)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.handleClose()
            // let view = { ...this.$route }
            // this.$store.dispatch('tagsView/delView', view).then(() => {
            // })
            // this.$router.push({ path: '/DMS/standard/dict', query: { id: this.$route.query.id } })
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleCancel() {
      // this.dialogVisible = false
      this.addAndEditdialogTit = '表单详情'
      // this.$refs.form.resetFields()
      // this.getTableList()
      this.fileList = [...this.fileListlength];
      this.pictureNameDeleteList = []
      this.isEdit = false
      this.isAdd = false
    },
    handleEdit() {
      this.addAndEditdialogTit = '编辑表单'
      this.isEdit = true
    },
    handleNodeClick() {},
    handleMoveClose() {
      this.dialogVisibleMove = false
    },
    radioSelectHandle(data, checked, node) {
      if (checked === true) {
        this.checkedId = data.id
        this.checkedParentId = data.parentId
        this.$refs.treeForm.setCheckedKeys([data.id])
      } else {
        if (this.checkedId == data.id) {
          this.$refs.treeForm.setCheckedKeys([data.id])
        }
      }
      // this.selectIds
    },
    handleMove() {
      if (this.selectIds.length == 0) {
        this.$message.warning('请选中一项！')
        return false
      }
      this.dialogVisibleMove = true
    },
    handleMoveConfirm() {
      var params = {
        selectIds: this.selectIds,
        checkedId: this.checkedId,
        checkedParentId: this.checkedParentId
      }
      moveModify({ dictId: this.selectIds, treeId: this.checkedId }).then(
        res => {
          this.$message({
            message: '移动成功',
            type: 'success'
          })
          this.dialogVisibleMove = false
          this.getTableList()
        }
      )
    },
    // 按字段搜索
    filterHandle(keyword) {
      getModify({ dictName: keyword }).then(res => {
        console.log(res)
        this.fieldList = res.rows
      })
    },
    // tree 拖拽
    nodeDropHandle(data) {
      var { lastNode, type, node } = data
      var parentId = ''
      var innerData = ''
      var sortList = []
      if (type == 'inner') {
        parentId = lastNode.data.id
        innerData = lastNode.data.childrens
      } else {
        parentId = lastNode.data.parentId
        innerData = lastNode.parent.data.childrens
      }
      for (var i = 0; i < innerData.length; i++) {
        sortList.push({ id: innerData[i].id, sort: i + 1 })
      }
      setTreebatch({
        custom: sortList,
        parentId: parentId,
        type: 1
      }).then(res => {
        this.$message({
          message: '拖拽成功',
          type: 'success'
        })
        this.getList(1)
      })
      console.log(sortList, parentId)
    },
    reloadHandle(type) {
      if (type != '按目录') {
        this.fieldList = []
        return
      }
      this.getList(1)
    },
    handleRemove(file) {
      this.fileList.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.fileList.splice(index, 1)
          // var fileFormData = new FormData();
          // fileFormData.append('pictureNameDeleteList ',file.raw,file.name);
          // uploadImage(fileFormData).then(res=>{})
          this.isMaxNum = false
          if (item.status == 'success') {
            this.pictureNameDeleteList.push(item.url)
          }
        }
      })
      // uploadImage
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageVisible = true
    },
    // handleDownload(file) {
    // 	console.log(file);
    // },
    beforeUpload(file) {
      var fileTypes = [
        'image/jpg',
        'image/png',
        'image/jpeg',
        'image/gif'
      ]
      var computedType = fileTypes.includes(file.raw.type)
      var size = file.size / 1024 >= 3
      console.log(file, computedType, size)
      if (!computedType) {
        this.$message({
          message: '上传格式为：jpg,png,jpeg,gif',
          type: 'error'
        })
        return false
      }
      if (!size) {
        this.$message({
          message: '上传图片最大为3M',
          type: 'error'
        })
        return false
      }

      return size && computedType
    },
    // 点击上传图片
    uploadChangeHandle(file, fileList) {
      this.isMaxNum = fileList.length >= this.maxNum
      this.fileList.push(file)
    }
  }
}
</script>
<style>
.hide .el-upload--picture-card {
    display: none;
}
</style>
<style lang="scss" scoped>
@import "~@/assets/styles/system/common.scss";
.dict {
    margin: 0px 0px 30px 0px;
    padding: 0 10px;
    min-width: 1000px;
    display: flex;
    min-height: calc(100vh - 124px);
    .bg {
        background: #ffffff;
        padding: 20px 16px;
    }
    .code-title {
        border-left: 4px solid #1183f8;
        padding-left: 10px;
        line-height: 20px;
        height: 20px;
        font-weight: 400;
        font-size: 18px;
        margin: 0 0 20px 0;
        color: #606266;
    }
    .rightTable {
        width: calc(100% - 352px);
    }
}
.dict ::v-deep .move-content {
    height: 400px;
    overflow: auto;
}
::v-deep .el-upload-list__item {
  transition: none !important;
}
.g-tree {
    ::v-deep.el-tree-node__content {
        display: block;
        position: relative;
        margin-left: 10px;
        width: 100%;
        border-bottom: 1px solid #ddd;
        .el-checkbox {
            position: absolute;
            right: 80px;
        }
        .el-checkbox__input {
            line-height: 2;
        }
    }
    ::v-deep.el-tree-node__children {
        width: 100%;
    }
}
.dict-upload ::v-deep .el-upload-list--picture-card .el-upload-list__item,
::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
}
.dict-upload ::v-deep .el-upload--picture-card {
    line-height: 80px;
}
.content-item ::v-deep {
    .el-form-item__content,
    .el-form-item__label {
        line-height: 20px !important;
        span {
            white-space: pre-wrap;
        }
    }
}
</style>
